<template>
  <div style="width:100%;height:100%;">
    <div id="app" v-if="isShowFlag==1">
      <div class="headerTop container">
        <div>
          <span style="margin-left:2px;">您好，欢迎来到河北金融服务平台</span>
        </div>
        <div class="wechat-logo">
          <img :src="weCahtLogo" alt width="15px" style="position:relative;top:3px;left:-3px;" />
          <a class="hoverShow" style="color:#333333;">
            微信小程序
            <div class="qrShow">
              <img src="./assets/images/weChatCodePic.png" alt width="120px" />
              <p>扫码使用微信小程序</p>
            </div>
          </a>
        </div>
      </div>
      <div style="margin-top:15px;">
        <div class="horizontal container">
          <div>
            <img :src="logo1" alt width="120px" />
            <img class="mleft15" :src="logo2" alt width="150px" />
            <div class="address-symbol cursor-point">
              <img :src="location" alt width="20px" style="position:relative;top:3px;" />
              <b class="mleft5" style="position:relative;top:-3px;">{{showAddress[showAddress.length-1]}}</b>
              <img class="mleft5" style="position:relative;top:-3px;" :src="arrowUp" alt />
              <div v-if="areaList.length" id="address-list" class="address-list">
                <h3 v-for="(item,index) in showAddress.slice(0,2)" :key="index">{{item}}</h3>
                <div v-if="showAddress.length==1">
                  <p v-for="(item,index) in areaList[1]" :key="index" @click="chooseAreaHandlere(item)">{{item.areaName}}</p>
                </div>
                <div v-if="showAddress.length>1">
                  <p v-for="(item,index) in areaList[2]" :key="index" @click="chooseAreaHandlere(item)">{{item.areaName}}</p>
                </div>
              </div>
            </div>
          </div>
          <div class="horizontal-right">
            <div style="font-weight:600;font-size:14px;margin-right:30px;">
              <span
                class="mleft15 cursor-point"
                :class="jumpPageFlag == 1 ? 'active':''"
                @click="jumpPage(1)"
              >首页</span>
              <span
                class="mleft20 cursor-point"
                :class="jumpPageFlag == 2 ? 'active':''"
                @click="jumpPage(2)"
              >贷款产品</span>
              <span
                class="mleft20 cursor-point"
                :class="jumpPageFlag == 3 ? 'active':''"
                @click="jumpPage(3)"
              >政策咨询</span>
              <span
                class="mleft20 cursor-point"
                :class="jumpPageFlag == 4 ? 'active':''"
                @click="jumpPage(4)"
              >关于我们</span>
            </div>
            <div class="home-btn" style="display:inline-block;">
              <span
                style="color:#00A573;line-height:23px;"
                class="cursor-point"
                @click="goLoginPage"
              >登录</span>
              <span style="color:#E4E4E4;margin-left:5px;margin-right:5px;">|</span>
              <span style="line-height:23px;" class="cursor-point" @click="goRegisterPage">注册</span>
            </div>
            <div
              class="home-btn mleft15 cursor-point"
              style="display:inline-block;"
              @click="goPersonalCenter"
            >
              <img style="position:relative;top:3px;left:-5px;" :src="userCenter" alt width="15px" />
              <span>个人中心</span>
            </div>
          </div>
        </div>
      </div>

      <div
        v-show="$store.getters.getBreadCrumbs.breadCrumbsName1"
        style="background:rgb(238, 238, 238);padding-top:10px;padding-bottom:10px;"
      >
        <div class="container">
          <Breadcrumb separator=">">
            <span>当前位置：</span>
            <Breadcrumb-item>首页</Breadcrumb-item>
            <Breadcrumb-item
              :to="$store.getters.getBreadCrumbs.href"
            >{{$store.getters.getBreadCrumbs.breadCrumbsName1}}</Breadcrumb-item>
            <Breadcrumb-item
              v-show="$store.getters.getBreadCrumbs.breadCrumbsName2"
            >{{$store.getters.getBreadCrumbs.breadCrumbsName2}}</Breadcrumb-item>
          </Breadcrumb>
        </div>
      </div>

      <router-view :tradeList="tradeList" 
      :infoAggrehation="infoAggrehation" 
      :productList="productList" 
      :policyInfo="policyInfo"
      :newsInfo="newsInfo"
      />

      <div class="footer marginT20">
        <div class="footer-info">
          <div>
            <Row>
              <i-col span="2">网站信息</i-col>
              <i-col span="20">
                <Breadcrumb separator="|">
                  <Breadcrumb-item>帮助中心</Breadcrumb-item>
                  <Breadcrumb-item>关于我们</Breadcrumb-item>
                  <Breadcrumb-item>用户服务协议</Breadcrumb-item>
                  <Breadcrumb-item>隐私声明</Breadcrumb-item>
                </Breadcrumb>
              </i-col>
            </Row>
          </div>
          <div style="display:flex;justify-content:space-between;">
            <div>
              <Row style="margin-top:50px">
                <i-col span="6">
                  <img src="./assets/images/u355@2x.png" alt width="120px" />
                </i-col>
                <i-col span="18">
                  <p>主办单位：河北省地方金融监督管理局（河北省金融工作办公室）</p>
                  <p>承建单位：河北省惠信大数据科技服务有限公司</p>
                  <p>证书编码：冀ICP备XXXXXXXX号-X Copyright (C) 2020-2030 jr.esgcc.com.cn</p>
                </i-col>
              </Row>
            </div>
            <div>
              <p class="tel">
                <img :src="contactUs" alt width="50px" style="position:relative;top:15px;" />
                0312-6098667
              </p>
              <p class="marginT20">地址：河北省石家庄市长安区裕华东路113号</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="login" v-if="isShowFlag==2">
      <router-view />
    </div>
    <div id="register" v-if="isShowFlag==3">
      <router-view />
    </div>
  </div>
</template>

<script>
import {mapActions} from "vuex";
import logo1 from "@/assets/images/logo1.png";
import logo2 from "@/assets/images/logo2.png";
import location from "@/assets/images/位置.png";
import arrowUp from "@/assets/images/矩形 118.png";
import userCenter from "@/assets/images/登录 用户.png";
import weCahtLogo from "@/assets/images/微信.png";
import contactUs from "@/assets/images/联系我们.png";

// import { mapGetters } from 'vuex'

export default {
  name: "app",
  data() {
    return {
      logo1: logo1,
      logo2: logo2,
      location: location,
      arrowUp: arrowUp,
      userCenter: userCenter,
      weCahtLogo: weCahtLogo,
      contactUs: contactUs,
      jumpPageFlag: 1,
      areaList:[],
      showAddress:['河北省'],

      tradeList:[],
      infoAggrehation:{},
      productList:[],
      policyInfo:[],
      newsInfo:[],

    };
  },
  // computed: {
  //   ...mapGetters([
  //     'getBreadCrumbs'
  //   ])

  // },
  created(){
    window.areaArr = [];
    this.isShow = 1;
    this.$axios('searchRegionCode',[],{}).then(res=>{
      if(res.code == 200){
        this.getrelativeInfo();
        this.areaList = res.data.result;
        if(this.areaList.length){
          window.areaArr.push(res.data.result[0][0].areaCode.toString());
          this.showAddress[0] = res.data.result[0][0].areaName;
        }
      }
    })
  },
  methods: {
    ...mapActions(["setAddressInfo"]),
    getList(){
      // this.$axios('asdsada',[],{}).then(res=>{

      // })
      // this.$get('/wap/v1/user/products').then(res=>{
      //   console.log(res)
      // })
    },
    goLoginPage() {
      this.isShow = 2;
      this.$router.push("/login");
    },
    goRegisterPage() {
      this.isShow = 3;
      this.$router.push("/register");
    },
    goPersonalCenter() {
      this.$router.push("/personalCenterHome");
    },
    jumpPage(data) {
      this.jumpPageFlag = data;
      switch (data) {
        case 1:
          this.$router.push("/");
          break;
        case 2:
          this.$router.push("/financingProducts");
          break;
        case 3:
          this.$router.push("/infoList");
          break;
        case 4:
          this.$router.push("/aboutUs");
          break;
      }
    },
    chooseAreaHandlere(data) {
      this.showAddress[this.showAddress.length] = data.areaName;
      if(this.showAddress.length <= 2 ){
        window.areaArr[this.showAddress.length] = data.areaCode.toString();
      } else{
        window.areaArr[2] = data.areaCode.toString();
      }
      // this.setAddressInfo(window.areaArr);
      let disNoneEle = document.getElementById('address-list');
      disNoneEle.classList.add("none");
      this.getrelativeInfo();
    },
    getrelativeInfo(){
      //企业相关信息
      this.$axios('infoAggregation',[],{}).then(res=>{
        if(res.code == 200){
          this.infoAggrehation = res.data;
        }
      })
      //贷款产品
      this.$axios('getHotProducts',[],{areaCode:"130100",level:1}).then(res=>{
        if(res.code == 200){
          this.productList = res.data.featureProductList;
        }
      })
      //交易动态
      this.$axios('getTradeInfo',[],{}).then(res=>{
        if(res.code == 200){
          this.tradeList = res.data.result;
        }
      })
      //政策咨询
      let policyObj = {
        newsType:0,
        proCode: window.areaArr[0]?window.areaArr[0]:"",
        cityCode: window.areaArr[1]?window.areaArr[1]:"",
        countyCode:  window.areaArr[2]?window.areaArr[2]:"",
      }
      this.$axios('getpolicyInfoList',[1,3],policyObj).then(res=>{
        if(res.code == 200){
          this.policyInfo = res.data.result;
        }
      })
      let newsObj = {
        newsType:1,
        proCode: window.areaArr[0]?window.areaArr[0]:"",
        cityCode: window.areaArr[1]?window.areaArr[1]:"",
        countyCode:  window.areaArr[2]?window.areaArr[2]:"",
      }
      this.$axios('getpolicyInfoList',[1,3],newsObj).then(res=>{
        if(res.code == 200){
          this.newsInfo = res.data.result;
        }
      })
    },
  },
  computed: {
    isShowFlag() {
      if (this.$route.name == "login") {
        return 2;
      } else if (this.$route.name == "register") {
        return 3;
      } else {
        return 1;
      }
    }
  }
};
</script>

<style scoped>
</style>
<style>
#app {
  min-width: 1240px;
}
.headerTop {
  width: 1240px;
  padding-top: 15px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.headerTop .wechat-logo {
  width: 200px;
}
.horizontal {
  width: 1240px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.horizontal-right {
  display: flex;
}
.horizontal-right span.active {
  border-bottom: 2px solid #00ac96;
  padding-bottom: 4px;
  color: #00ac96;
}
.footer {
  height: 250px;
  background-color: #282828;
  color: #fff;
  padding: 40px 0;
}
.footer-info {
  width: 1240px;
  margin: 0 auto;
}
.footer .ivu-breadcrumb > span {
  font-weight: 400;
  color: #fff;
}
.footer .ivu-breadcrumb > span:last-child {
  font-weight: 400;
  color: #fff;
}
.tel {
  font-size: 30px;
}
.marginT50 {
  margin-top: 50px;
}
.marginT40 {
  margin-top: 40px;
}
.marginT10 {
  margin-top: 10px;
}
.text-center {
  text-align: center;
}
.weight700 {
  font-weight: 700;
}
.desc-text {
  color: #999;
  font-size: 14px;
}
.relative {
  position: relative;
}
.f16 {
  font-size: 16px;
  color: #999;
}
.hoverShow {
  position: relative;
}
.address-symbol {
  display: inline-block;
  position: relative;
  top: -10px;
  margin-left: 20px;
}
.address-list {
  display: none;
  width: 120px;
  position: absolute;
  top: 25px;
  left: 20px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 2px 7px 25px 0px rgba(23, 23, 23, 0.15);
  border-radius: 4px;
  z-index: 100;
  max-height:300px;
  overflow-y: auto;
}
.address-list h3 {
  padding: 10px;
  line-height: 30px;
  color: #00a573;
  border-bottom: 1px solid rgba(220, 220, 220, 1);
}
.address-list p {
  line-height: 20px;
  color: #333333;
  font-size: 13px;
  padding: 5px 10px;
}
.address-list p:hover{
  background: silver;
  cursor: pointer;
}
.address-symbol:hover .address-list {
  display: block;
}
.address-list:hover {
  display: block;
}
.qrShow {
  display: none;
  position: absolute;
  top: 17px;
  z-index: 100;
  left: -50%;
  width: 140px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 2px 7px 25px 0px rgba(23, 23, 23, 0.15);
  border-radius: 4px;
  text-align: center;
  font-size: 13px;
  color: #333333;
  font-weight: 600;
}
.qrShow p {
  line-height: 25px;
}
.hoverShow:hover .qrShow {
  display: block;
}
.home-btn {
  width: 95px;
  height: 25px;
  padding: 1px;
  border: 1px solid #00a573;
  border-radius: 30px;
  text-align: center;
  font-size: 12px;
}
.mleft5 {
  margin-left: 5px;
}
.mleft15 {
  margin-left: 15px;
}
.mleft20 {
  margin-left: 20px;
}
#login,
#register {
  width: 100%;
  height: 100%;
}
html,
body {
  width: 100%;
  height: 100%;
}
.cursor-point:hover {
  cursor: pointer;
}
.container {
  width: 1240px;
  margin: 0 auto;
}
.marginT20 {
  margin-top: 20px;
}
.marginT50 {
  margin-top: 50px;
}
.marginT40 {
  margin-top: 40px;
}
.marginT10 {
  margin-top: 10px;
}
.disinblo {
  display: inline-block;
}
.ivu-breadcrumb-item-separator {
  color: #666666;
}
.none{
  display: none;
}
</style>
